<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_util": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_util": "active",
      "util_typography": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">Utilities</a></li>
              <li class="breadcrumb-item active" aria-current="page">Typography</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              
              <h1 class="td-title">Typography</h1>
        <p class="td-lead">Use typography utilities to quickly style the text of an element. Great for heading, titles, or any other element.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Font Size</h4>
        <p class="mg-b-30">You can set a font size instantly to an element by using the following utilities classes.</p>

        <div class="table-responsive mg-t-25">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-30p">Class</th>
                <th class="wd-70p">Size</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>.tx-[size]</td>
                <td>8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 </td>
              </tr>
              <tr>
                <td>.tx-[size]</td>
                <td>18 | 20 | 22 | 24 | ... | 140 (step of 2) </td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        <div class="table-responsive">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-30p">Class</th>
                <th class="wd-30p">Viewport</th>
                <th class="wd-40p">Size</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>.tx-[viewport]-[size]</td>
                <td>xs | sm | md | lg | xl</td>
                <td>8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 </td>
              </tr>
              <tr>
                <td>.tx-[viewport]-[size]</td>
                <td>xs | sm | md | lg | xl</td>
                <td>18 | 20 | 22 | 24 | ... | 140 (step of 2) </td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        <hr class="mg-y-40">

        <h4 id="section2" class="mg-b-10">Font Weight</h4>
        <p class="mg-b-30">You can set a font weight instantly to an element by using the following utilities classes.</p>

        <div class="table-responsive mg-t-25">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-30p">Class</th>
                <th class="wd-70p">Weight</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>.tx-[weight]</td>
                <td>bold | semibold | medium | normal | light | thin | xthin</td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        <hr class="mg-y-40">

        <h4 id="section3" class="mg-b-10">Font Family</h4>
        <p class="mg-b-30">You can set a font family instantly to an element by using the following utilities classes.</p>

        <div class="table-responsive mg-t-25">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-30p">Class</th>
                <th class="wd-70p">Family</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>.tx-[family]</td>
                <td>sans | lato | interui | roboto</td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        <hr class="mg-y-40">

        <h4 id="section4" class="mg-b-10">Font Color</h4>
        <p class="mg-b-30">You can set a font color instantly to an element by using the following utilities classes.</p>

        <div data-label="Example" class="td-example">
          <div class="row row-sm">
            <div class="col-sm">
              <div class="bd pd-20">
                <p class="mg-b-0 tx-gray-500">Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.</p>
              </div><!-- card -->
            </div><!-- col -->
            <div class="col-sm">
              <div class="bg-dark pd-20">
                <p class="mg-b-0 tx-white-7">Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.</p>
              </div><!-- card -->
            </div><!-- col -->
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;p class=&quot;tx-gray-500&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;tx-white-7&quot;&gt;...&lt;/p&gt;</code></pre>

        <div class="table-responsive mg-t-25">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-30p">Class</th>
                <th class="wd-70p">Color</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>.tx-[color]</td>
                <td>primary | success | warning | danger | info | indigo | purple | orange | teal | pink | black | white | inverse</td>
              </tr>
              <tr>
                <td>.tx-gray-[num]</td>
                <td>100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900</td>
              </tr>
              <tr>
                <td>.tx-white-[transparency]</td>
                <td>2 | 3 | 4 | 5 | 6 | 7 | 8</td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        <hr class="mg-y-40">

        <h4 id="section5" class="mg-b-10">Font Spacing</h4>
        <p class="mg-b-30">You can set a font spacing instantly to an element by using the following utilities classes.</p>

        <div class="table-responsive mg-t-25">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-30p">Class</th>
                <th class="wd-70p">Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>.tx-spacing-[value]</td>
                <td>1 | 2 | 3 | 4 | 5 | 6 | 7 | 8</td>
              </tr>
              <tr>
                <td>.tx-spacing--[value]</td>
                <td>1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 ( negative spacing result )</td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        <hr class="mg-y-40">

        <h4 id="section6" class="mg-b-10">Line Height</h4>
        <p class="mg-b-30">You can set a line height instantly to an element by using the following utilities classes.</p>

        <div class="table-responsive mg-t-25">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-30p">Class</th>
                <th class="wd-70p">Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>.lh-[value]</td>
                <td>1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15</td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        <div class="table-responsive">
          <table class="table table-components">
            <thead>
              <tr>
                <th class="wd-30p">Class</th>
                <th class="wd-20p">Viewport</th>
                <th class="wd-50p">Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>.lh-[viewport]-[value]</td>
                <td>xs | sm | md | lg | xl</td>
                <td>1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15</td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive -->

        @@include('./footer.html',{})

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Font Size</a>
            <a href="#section2" class="nav-link">Font Weight</a>
            <a href="#section3" class="nav-link">Font Family</a>
            <a href="#section4" class="nav-link">Font Color</a>
            <a href="#section5" class="nav-link">Font Spacing</a>
            <a href="#section6" class="nav-link">Line Height</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->

    @@include('./_script.html',{})
    <script>
      $(function(){
        'use strict'
      });
    </script>
  </body>
</html>
